<template>
    <main class="row align-items-center"
          :style="{background: scrollTop ? 'rgba(255,255,255,.85)' : '', borderBottom: scrollTop ? '1px solid rgb(244, 244, 244)' : '',
           zIndex: scrollTop ? 99999 : '', position:  $route.name === 'Windows' || $route.name === 'Chrome' || $route.name === 'Chrome' || $route.name === 'Ios' ? 'relative' : 'fixed',backgroundColor: $route.name === 'Game' ? '#15152D' : '',
            background: $route.name === 'Affiliate' && !scrollTop  ? 'none' : '', borderBottom: $route.name === 'Game' ? 'none!important' : ''}">
        <div class="container"
             :class="[$route.name === 'Affiliate' ? 'affiliate' : '', $route.name === 'Game' ? 'game' : '']"
             ref="affiliate">
            <div class="row align-items-center">
                <router-link :to="{name: 'Home'}" class="col-md-4 meta">
                    <img :src="logo" alt="">
                    <p>Malus</p>
                    <div class="fake-tag">
                        <i class="ri-checkbox-circle-fill"></i>

                        {{ $t('app_menu_meta_title') }}
                    </div>
                </router-link>

                <div class="col-5 d-xl-block d-none">
                    <div class="row menu">
                        <div class="col-3 menu-li" v-for="(item, key) in menu" :key="key"
                             @mouseleave="key === 2 ? hideDrop(key) : ''"
                             @mouseenter="key === 2 ? showDrop(key) : ''" @native="refresh" v-show="!item.hidden">
                            <router-link class="route-link" :to="{name: item.name}">
                                {{ item.title }}
                                <span class="act-tag" v-show="key === 1">首月半价</span>
                                <i class="ri-arrow-drop-down-fill" v-show="key === 2"></i>
                                <div v-show="key === 2">
                                    <Dropdown :menu="item.children" ref="menuDrop"></Dropdown>
                                </div>
                            </router-link>
                        </div>
                    </div>
                </div>

                <div class="col-3 d-xl-block d-none">
                    <div class="login row align-items-center">
                        <div class="lang col-5" @mouseleave="hideLang" @mouseenter="showLang">
                            <p>{{ languageType }}
                            </p>
                            <div class="menu animate__animated" v-show="langShow">
                                <div class="item" v-for="(item, key) in language" :key="key">
                                    <div @click="changeLang(item.type)" class="item-li">{{ item.title }}</div>
                                </div>
                            </div>
                            <i class="ri-arrow-drop-down-fill"></i>
                        </div>
                        <router-link :to="{name: 'Login'}" class="col-3">{{ $t('app_menu_login') }}</router-link>
                        <router-link :to="{name: 'Signup'}" class="col-4">{{ $t('app_menu_signup') }}</router-link>
                    </div>
                </div>
                <i class="ri-menu-fill icon-menu-default d-xl-none" @click="menuShow = true"></i>
            </div>
        </div>

        <ul class="navbar-nav" :class="menuShow ? 'navbar-nav-open' : ''" id="scroll-nav">
            <i class="ri-close-fill icon-menu-close" @click="menuShow = false"></i>
            <li v-for="(item, key) in menu" :key="key" @touchend="key === 2 ? showMobileMenu(key) : ''">
                <router-link :to="{name: item.name}" class="s-nav link" @native="refresh">{{ item.title }}
                    <i class="ri-arrow-drop-down-fill" v-show="key === 2"></i>
                </router-link>
                <Dropdown :menu="item.children" ref="menuMobileDrop"></Dropdown>
            </li>
            <li>
                <router-link class="s-nav link" :to="{name: 'Login'}">
                    {{ $t('app_menu_user') }}
                </router-link>
            </li>
        </ul>
    </main>
</template>

<script>
import Dropdown from "@/components/Dropdown";

export default {
    name: "AppMenu",
    components: {Dropdown},
    data() {
        return {
            logo: require('@/assets/logo.png'),
            menu: [
                {
                    title: this.$t('app_menu_1'),
                    name: 'Download'
                },
                {
                    title: this.$t('app_menu_2'),
                    name: 'Buy'
                },
                {
                    title: this.$t('app_menu_3'),
                    name: '',
                    children: [
                        {
                            title: this.$t('app_menu_3_son_1'),
                            name: 'Game',
                        },
                        {
                            title: this.$t('app_menu_3_son_2'),
                            name: 'Education',
                        },
                        {
                            title: this.$t('app_menu_3_son_3'),
                            name: 'Enterprise',
                        },
                        {
                            title: this.$t('app_menu_3_son_4'),
                            name: 'Support',
                        },
                        {
                            title: this.$t('app_menu_3_son_5'),
                            name: 'ForStudents',
                        },
                        {
                            title: this.$t('app_menu_3_son_6'),
                            name: 'ForLife',
                        },
                        {
                            title: this.$t('app_menu_3_son_7'),
                            name: 'ForTravel',
                        }
                    ]
                },
                {
                    title: this.$t('app_menu_4'),
                    name: 'Affiliate',
                    hidden: sessionStorage.getItem('lang') === 'en' ? true : false
                },
            ],
            language: [
                {
                    type: 'zh',
                    title: '简体中文'
                },
                {
                    type: 'en',
                    title: 'English'
                }
            ],
            langShow: false,
            dropShow: false,
            scrollTop: false,
            menuShow: false,
            languageType: ""
        }
    },
    created() {
        //检测缓存是否有选择语言记录
        let session = sessionStorage.getItem('lang')
        if (session) {
            this.languageType = session
        } else {
            sessionStorage.setItem('lang', 'zh')
            this.languageType = 'zh'
        }
        this.$i18n.locale = this.languageType
        this.reload()
    },
    methods: {
        refresh() {
            this.$router.go(0)
        },
        showLang() {
            this.langShow = true
        },
        hideLang() {
            this.langShow = false
        },
        changeLang(e) {
            sessionStorage.setItem('lang', e)
            this.$i18n.locale = e
            this.langShow = false
            window.location.reload();
        },
        showMobileMenu() {
            this.$refs.menuMobileDrop[2].show = true
            this.dropShow = true
        },

        showDrop() {
            this.$refs.menuDrop[2].show = true
            this.dropShow = true
        },
        hideDrop() {
            this.$refs.menuDrop[2].show = false
            this.dropShow = false
        },
        scrollToTop() {
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            if (scrollTop > 50) {
                this.scrollTop = true
            } else {
                this.scrollTop = false
            }
            if (this.$route.name === 'Affiliate') {
                if (scrollTop > 50) {
                    this.$refs.affiliate.classList.remove('affiliate')
                } else {
                    this.$refs.affiliate.classList.add('affiliate')
                }
            }
        },
        fetchData() {
            this.menuShow = false
        },
        reload() {
            this.menu = [
                {
                    title: this.$t('app_menu_1'),
                    name: 'Download'
                },
                {
                    title: this.$t('app_menu_2'),
                    name: 'Buy'
                },
                {
                    title: this.$t('app_menu_3'),
                    name: '',
                    children: [
                        {
                            title: this.$t('app_menu_3_son_1'),
                            name: 'Game',
                        },
                        {
                            title: this.$t('app_menu_3_son_2'),
                            name: 'Education',
                        },
                        {
                            title: this.$t('app_menu_3_son_3'),
                            name: 'Enterprise',
                        },
                        {
                            title: this.$t('app_menu_3_son_4'),
                            name: 'Support',
                        },
                        {
                            title: this.$t('app_menu_3_son_5'),
                            name: 'ForStudents',
                        },
                        {
                            title: this.$t('app_menu_3_son_6'),
                            name: 'ForLife',
                        },
                        {
                            title: this.$t('app_menu_3_son_7'),
                            name: 'ForTravel',
                        }
                    ]
                },
                {
                    title: this.$t('app_menu_4'),
                    name: 'Affiliate',
                    hidden: sessionStorage.getItem('lang') === 'en' ? true : false
                },
            ]
        }
    },
    mounted() {
        window.addEventListener('scroll', this.scrollToTop) // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
    },
    watch: {
        // 如果路由有变化，会再次执行该方法
        '$route': 'fetchData'
    },
}
</script>

<style scoped lang="scss">
@media (max-width: 767.98px) {
    main {
        width: 100%;
    }
}

main {
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    backdrop-filter: blur(4px);
    background: rgba(255, 255, 255, .85);
    height: 68px;
    left: 0;
    right: 0;
    margin: auto;

    .affiliate {
        a {
            color: #fff !important;
        }

        p {
            color: #fff !important;
        }

        i {
            color: #fff;
        }

        .fake-tag {
            color: #fff !important;
        }
    }

    .game {
        a {
            color: rgba(255, 255, 255, .8) !important;
        }

        p {
            color: rgba(255, 255, 255, .8) !important;
        }

        i {
            color: rgba(255, 255, 255, .8);
        }

        .fake-tag {
            color: #fff !important;
        }
    }

    .meta {
        display: flex;
        align-items: center;

        img {
            width: 40px;
        }

        p {
            font-size: 24px;
            color: #333;
            font-weight: 500;
            margin-left: 11px;
            text-transform: uppercase;
        }

        .fake-tag {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 16px 20px 20px 2px;
            border: 1px solid #07BB07;
            padding: 2px 6px 2px 3px;
            font-size: 12px !important;
            text-transform: initial;
            color: #222;
            margin-left: 4px;
            font-weight: 500;
            transform: scale(.9);

            i {
                font-size: 14px;
                color: #07BB07;
                margin-right: 2px;
            }
        }
    }

    .menu {
        align-items: center;
        justify-content: center;
        text-align: center;

        .menu-li {
            color: #333;
            font-weight: 500;
            font-size: 14px;

            a {
                color: #333;
            }

            .act-tag {
                font-size: 12px;
                font-weight: 500;
                background: #FF5569;
                padding: 2px 6px;
                border-radius: 20px;
                position: absolute;
                right: 16px;
                top: -18px;
                color: #fff;
                transform: scale(.95);
            }

            .act-tag:before {
                display: block;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 4px 3px 0;
                border-color: #FF5569 transparent transparent;
                position: absolute;
                bottom: -3px;
                left: 7px;
                content: '';
            }
        }

        .menu-li:nth-child(3) a {
            height: 64px;
            line-height: 64px;
        }
    }

    .login {
        font-size: 12px;

        .lang {
            height: 68px;
            width: 80px;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            cursor: pointer;
            position: relative;
            color: #333;

            i {
                font-size: 16px;
            }

            .menu {
                display: flex;
                flex-direction: column;
                padding: 0;
                position: absolute;
                top: 65px;
                left: 0;
                z-index: 100;
                right: 0;
                border-radius: 4px;
                line-height: 16px;
                text-align: center;
                box-shadow: 0 8px 20px rgba(0, 0, 0, .1);

                .item {
                    display: flex;
                    justify-content: center;
                    min-width: 140px;
                    background: #fff;
                    border-bottom: 1px solid #f3f3f3;
                    font-size: 13px;
                    color: #333;
                    cursor: pointer;
                    transition: all .2s ease;
                    flex-direction: column;
                    height: auto;
                    padding: 10px;

                    .item-li {
                        color: #333;
                        font-weight: 500;
                    }

                    .item-li:hover {
                        color: #363fe5;
                    }
                }
            }

            .menu:before {
                width: 0;
                height: 0;
                content: '';
                border-style: solid;
                border-width: 0 6px 8px;
                border-color: transparent transparent #fff;
                position: absolute;
                left: 49%;
                top: -8px;
            }
        }

        a:last-child {
            height: 36px;
            width: auto;
            border-radius: 100px;
            background: #4D55E8;
            line-height: 36px;
            text-align: center;
            color: #fff;
        }
    }

    .icon-menu-default {
        position: absolute;
        right: 20px;
        color: #4d55e8;
        font-size: 24px !important;
        position: absolute;
        right: 16px;
        z-index: 99;
    }

    .navbar-nav {
        display: block !important;
        position: fixed;
        right: -330px;
        width: 250px;
        height: 100vh;
        top: 0;
        color: #fff;
        background: rgba(0, 0, 0, .94) !important;
        transition: all .2s ease;
        backdrop-filter: blur(2px);
        z-index: 999999999;

        li {
            position: relative;
        }

        i {
            margin: 32px 0 24px;
            display: block;
            font-size: 32px !important;
            text-align: center;
        }

        a {
            color: #fff;
            font-size: 18px;
            margin-right: 0;
            height: 60px;
            justify-content: center;
            align-items: center;
            display: flex;
            text-align: center;
            border-bottom: 1px solid rgba(255, 255, 255, .06);
        }
    }

    .navbar-nav-open {
        right: 0;
    }
}


</style>
